import React from 'react';
import request from 'umi-request';
import { Scrollbars } from 'react-custom-scrollbars';
import { ReactChild, ReactFragment, ReactPortal } from 'react';
import {
  Image,
  Input,
  Button,
  Avatar,
  Layout,
  Carousel,
  Tabs,
  Table,
  Tag,
  Space,
  Pagination,
  Breadcrumb,
  Row,
  Col,
  List,
  Card,
  Skeleton,
  Divider,
} from 'antd';
import {
  SearchOutlined,
  UserOutlined,
  AppleOutlined,
  AndroidOutlined,
} from '@ant-design/icons';
import '../rescueinfo/rescueinfo.less';
import _API from './api';
import a from './public/a.png';
import b from './public/b.png';
import c from './public/c.png';
import d from './public/d.png';
import { columns1, data1, columns2, data2 } from './public/tablist';
const { Footer, Sider, Content } = Layout;
const { TabPane } = Tabs;

class RescueinfoPage extends React.Component {
  // sublimt() {
  //   request.get('http://127.0.0.1:3000/api/rescueinfo').then((nody) => {
  //     console.log(nody);
  //   });
  // }
  state = {
    data: [],
  };
  //发送get请求获取数据
  sublimt() {
    request.get('http://127.0.0.1:3000/api/rescueinfo').then((nody) => {
      console.log(nody);
      // if (nody.status == 200) {
      //   console.log(nody.data.data);
      //   const data = nody.data.data;
      //   this.setState({
      //     data: data,
      //   });
      // }
    });
  }
  componentDidMount() {
    this.sublimt();
  }
  columns1 = [
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      render: (
        text:
          | boolean
          | ReactChild
          | ReactFragment
          | ReactPortal
          | null
          | undefined,
      ) => <a>{text}</a>,
    },
    {
      title: '东经',
      dataIndex: 'pos_e',
      key: 'pos_e',
    },
    {
      title: '北纬',
      dataIndex: 'pos_n',
      key: 'pos_n',
    },
    {
      title: '救援队名',
      key: 'name',
      dataIndex: 'name',
    },

    {
      title: '救援队简介',
      key: 'info',
      dataIndex: 'info',
    },
    {
      title: '认证信息',
      dataIndex: 'prove',
      key: 'prove',
    },
  ];
  data1 = this.state.data;

  render(): React.ReactNode {
    return (
      <div className="info_page">
        <div className="header">
          <div className="header_left">
            <Image
              width={50}
              src="https://img2.baidu.com/it/u=2892168039,3046714204&fm=253&fmt=auto&app=138&f=JPG?w=496&h=500"
            />
            <span style={{ color: '#888' }}>自然灾害信息共享平台</span>
          </div>
          <div className="header_right">
            <Input
              placeholder="请输入帖子的标题、正文关键字"
              suffix={<SearchOutlined style={{ fontSize: 16 }} />}
            />
            <Button type="primary" size="middle">
              发布
            </Button>
            <Avatar
              style={{ backgroundColor: '#87d068', width: '50px' }}
              icon={<UserOutlined />}
            />
          </div>
        </div>
        {/* <h1>Home - Page</h1> */}
        <Layout style={{ width: '100vw' }}>
          <Content style={{ width: '100vw', overflow: 'hidden' }}>
            <Row style={{ height: '60vh', overflow: 'hidden' }}>
              <Col span={10} style={{ overflow: 'auto' }}>
                <Scrollbars>
                  <Breadcrumb
                    style={{
                      padding: '10px 16px',
                      color: '#f5222d',
                      fontSize: '1.5em',
                    }}
                  >
                    <Breadcrumb.Item>河南</Breadcrumb.Item>
                    <Breadcrumb.Item>郑州</Breadcrumb.Item>
                  </Breadcrumb>
                  <List style={{ padding: '1vw 2vw', color: 'red' }}>
                    <List.Item>
                      <List.Item.Meta
                        avatar={
                          <Avatar src="https://img1.baidu.com/it/u=1888032,3375345803&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" />
                        }
                        title={<a href="https://m.thepaper.cn">澎湃新闻</a>}
                        description={
                          <div
                            style={{ color: '#434343', textAlign: 'justify' }}
                          >
                            @大象新闻
                            8月2日消息，大象新闻记者今天从河南省防汛救灾第十场新闻发布会上了解到，此次严重洪涝灾害，给人民群众生命财产安全造成了巨大损失：郑州市受灾人口173.6万人，市政道路损毁2718处，干线公路损毁1183处，农村道路损毁6181处，受灾农村1126个，倒塌房屋5.28万间，农作物受损139.6万亩、绝收43.8万亩，最新核实直接经济损失532亿元。
                          </div>
                        }
                      />
                    </List.Item>
                    <List.Item>
                      <List.Item.Meta
                        avatar={
                          <Avatar src="https://pic.rmb.bdstatic.com/bjh/user/18ac6e1c0cd4c8a64cfe14322013104b.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=19540" />
                        }
                        title={
                          <a href="https://author.baidu.com/home?from=bjh_article&app_id=1570168240515616">
                            央视新闻
                          </a>
                        }
                        description={
                          <div
                            style={{ color: '#434343', textAlign: 'justify' }}
                          >
                            记者从河南省有关部门获悉，郑州“7·20”特大暴雨灾害发生后，党中央、国务院高度重视，第一时间对防汛救灾、灾害调查等作出部署。河南省公安机关对涉嫌违法犯罪的8名企业人员立案侦查并依法逮捕，河南省纪检监察机关按照干部管理权限，依规依纪依法对灾害中涉嫌违纪违法的89名公职人员进行严肃问责。
                          </div>
                        }
                      />
                    </List.Item>
                  </List>
                </Scrollbars>
              </Col>
              <Col span={14}>
                <div>
                  <Carousel autoplay>
                    <img src={a} alt="" />
                    <img src={b} alt="" />
                    <img src={c} alt="" />
                    <img src={d} alt="" />
                  </Carousel>
                </div>
              </Col>
            </Row>
            <div
              style={{
                backgroundColor: '#85a5ff',
              }}
            >
              <div>
                <Button
                  type="primary"
                  size="large"
                  style={{
                    margin: '2vw 0 2vw 6vw',
                    backgroundColor: '#f5222d',
                  }}
                >
                  提供支援！
                </Button>
                <Button
                  type="primary"
                  size="large"
                  style={{
                    margin: '2vw 0 2vw 30vw',
                    backgroundColor: '#f5222d',
                  }}
                >
                  捐款！
                </Button>
                <Button
                  type="primary"
                  size="large"
                  style={{
                    margin: '2vw 0 2vw 30vw',
                    backgroundColor: '#f5222d',
                  }}
                >
                  请求救援！
                </Button>
              </div>
              <Table
                columns={columns1}
                dataSource={data1}
                style={{ padding: '0 2vw 0' }}
              />
            </div>
          </Content>

          <Footer
            style={{
              background:
                'linear-gradient(to right, rgb(189, 195, 199), rgb(44, 62, 80))',
            }}
          >
            青训营第二届: 我们就是队 ----- 自然灾害信息共享平台
          </Footer>
        </Layout>
      </div>
    );
  }
}

export default RescueinfoPage;
